<template>
	<view class="page">
		<view class="formData">
			<view class="uni-form-item uni-column">
				<view class="title">旧手机号：</view>
				<input class="uni-input" type="text" />
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">新手机号：</view>
				<input class="uni-input" type="text" />
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">验证码：</view>
				<input class="uni-input" type="text" />
				<view class="sendBtn" :class="{active: !isSend}" @click="sendMsg">{{innerHTML}}</view>
			</view>
		</view>
		<view class="line25"></view>
		<view class="sumbmit">确认修改</view>
	</view>
</template>

<script>
	export default {
		components: {
		},
		data() {
			return {
				innerHTML: "获取验证码",
				disabled: true,
				count: 60,
				isSend: true
			};
		},
		methods: {
			sendMsg() {
				if (!this.isSend) {
					uni.showToast({
						title: '验证码已发送',
						icon: "none"
					});
					return false
				}
				this.isSend = false
				var This = this;
				this.disabled = true;
				this.innerHTML = this.count + 's';
				var timer = setInterval(function() {
					This.count--;
					if (This.count === -1) {
						clearInterval(timer);
						This.disabled = false;
						This.innerHTML = '获取验证码';
						This.count = 60;
						This.isSend = true
					} else {
						This.innerHTML = This.count + 's';
					}
				}, 1000);
			}
		}
	}
</script>
<style>
	page {
		width: 100%;
		height: 100%;
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	.page {
		width: 100%;
		height: 100%;
		background: #fff;

		.formData {
			padding: 0 33rpx;

			.uni-form-item {
				position: relative;
				display: flex;
				padding: 33rpx 0;
				border-bottom: 1px solid rgba($color: #000000, $alpha: 0.1);

				.title {
					font-size: 32rpx;
					color: #B3B3B3;
				}

				.uni-input {
					position: relative;
					flex: 1;
					font-size: 32rpx;
					color: #B3B3B3;
					z-index: 0;
				}
			}

			.uni-form-item:last-child {
				margin-bottom: 33rpx;
			}
		}

		.sumbmit {
			width: 683rpx;
			height: 100rpx;
			margin: 67rpx auto 0;
			line-height: 100rpx;
			background: rgba(54, 138, 255, 1);
			border-radius: 50rpx;
			border: 1px solid rgba(151, 151, 151, 1);
			text-align: center;
			font-size: 36rpx;
			color: #fff;
		}
	}

	.line25 {
		width: 100%;
		height: 25rpx;
		background: #F4F4F4;
	}

	.sendBtn {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 175rpx;
		height: 58rpx;
		line-height: 56rpx;
		background: rgba(54, 138, 255, 1);
		border-radius: 29rpx;
		border: 1px solid rgba(151, 151, 151, .1);
		text-align: center;
		font-size: 26rpx;
		color: #fff;
		z-index: 1;
	}
	.sendBtn.active {
		background: rgba(54, 138, 255, .5);
	}
</style>
